<!-- 统计卡片 -->
<template>
  <el-row :gutter="24" style="height: 380px;">
    <el-col :lg="8" :md="24" style="padding-left: 6px;padding-right: 1px;margin-top:5px; height: 380px;">
      <el-card class="analysis-chart-card" shadow="never" style="height: 380px;">
        <template v-slot:header>
          <div class="ele-cell" style="font-size: 16px;height: 18px;">
            <div class="ele-cell-content">安全库存预警</div>
          </div>
        </template>
        <div style="display: flex;width: 100%;height: 100px;flex-direction: column;">
          <div class="analysis-chart-card-content" >
            <dv-scroll-board id="centerrightChart" :config="configStock" style="width: 100%;height:380px;" />
            </div>
        </div>
        <div class="analysis-chart-card-content">
          
      </div>
      </el-card>
    </el-col>
    <el-col :lg="8" :md="24" style="padding-left: 3px;padding-right: 1px;margin-top:5px; height: 380px;">
      <el-card class="analysis-chart-card" shadow="never" style="height: 380px;">
        <template v-slot:header>
          <div class="ele-cell" style="font-size: 16px;height: 18px;">
            <div class="ele-cell-content">采购分析</div>
            <div :class="['ele-inline-block', { 'hidden-xs-only': true }]">
              <el-radio-group v-model="where.dateEnum" size="small" @input="(v)=>initPurOrderTime(v,true)">
                <!-- <el-radio-button :label="day">今日</el-radio-button> -->
                  <el-radio-button :label="2">本月</el-radio-button>
                  <el-radio-button :label="3">本年</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <div >
        <v-chart
          ref="SaleAmountChart"
          style="height: 300px;"
          :option="stockChartOption"
        />
      </div>
      </el-card>
    </el-col>
    <el-col :lg="8" :md="24" style="padding-left: 3px;padding-right: 1px;margin-top:5px; height: 380px;">
      <el-card class="analysis-chart-card" shadow="never" style="height: 380px;">
        <template v-slot:header>
          <div class="ele-cell" style="font-size: 16px;height: 18px;">
            <div class="ele-cell-content">采购发货提醒</div>
          </div>
        </template>
        <div >
          <dv-scroll-board id="centerrightChart" :config="configSaleAmount" style="width: 100%;height:380px;" @click="purOrderClick" />
      </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  import VChart from 'vue-echarts';
  import { removePageTab } from '@/utils/page-tab-util';
  import { QuerySafetystockRemindStatisticsView,QueryPurOrderStatisticsView,QueryPurDeliveryRemindStatisticsView } from '@/api/home'


  export default {
    name: 'HeaderCard',
    props:{
      whereParams:Object
    },
    components: { VChart },
    data() {
      return {
        where:{dateEnum:[]},
        saleChartOption:{},
        stockChartOption:{},
        saleAmountChartOption:{},
        configSaleAmount: { 
          header:[],
          data:[
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(A供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(B供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(C供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(D供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(E供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(F供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(G供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(H供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CG240700054(I供应商)</span>','<span style="font-size:13px;color:#687284">距离发货日期还剩</span><span style="font-size:13px;color:red">2</span><span style="font-size:13px;color:#687284">天</span>'],
          ],
          rowNum:8,
          headerBGC: 'transparent', // 表头背景色
          oddRowBGC: 'transparent', // 奇数行背景色
          evenRowBGC: 'transparent', // 偶数行背景色
          columnWidth: [240,150],
          align: ['center','center']
        },
        configStock: { 
          header: ['<span style="font-size:14px;color:#000000">名称</span>', '<span style="font-size:14px;color:#000000">仓库</span>','<span style="font-size:14px;color:#000000">可用数量</span>',  '<span style="font-size:14px;color:#000000">安全库存</span>'],
          headerBGC: 'transparent', // 表头背景色
          oddRowBGC: 'transparent', // 奇数行背景色
          evenRowBGC: 'transparent', // 偶数行背景色
          data: [
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000014</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">2</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000015</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">3</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000016</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">4</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000017</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">5</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000018</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">2</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000019</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">1</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000020</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">2</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000021</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">3</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000022</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">2</span>'],
            // ['<span style="font-size:13px;color:#687284;cursor:pointer">CP24063000023</span>', '<span style="font-size:13px;color:#687284">总仓</span>', '<span style="font-size:13px;color:#687284">2</span>', '<span style="font-size:13px;color:#687284">1</span>']
          ],
          rowNum:8,
          columnWidth: [190,90,100,100],
          align: ['center','center','center','center'],
        },
      };
    },
    created(){
      
      
    },
    activated(){
      this.initPurOrderTime('2',true);
      this.reloadQuerySafetystockRemind();
      this.reloadQueryPurDeliveryRemind();
    },
    methods: {

      reloadQuerySafetystockRemind(){

        QuerySafetystockRemindStatisticsView().then((res)=>{

          if(res && res.length>0){
            let array = [];
            res.map((item)=>{
                let blist =[
                  `<span style="font-size:13px;color:#687284;">${item.productname}(${item.productcode})/span>`, `<span style="font-size:13px;color:#687284">${item.warehouse}</span>`, `<span style="font-size:13px;color:#687284">${item.useqty}</span>`, `<span style="font-size:13px;color:#687284">${item.secuqty}</span>`
                ];
                array.push(blist);
            });
            this.configStock.data =[];
            this.configStock ={
              rowNum:8,
              headerBGC: 'transparent', // 表头背景色
              oddRowBGC: 'transparent', // 奇数行背景色
              evenRowBGC: 'transparent', // 偶数行背景色
              columnWidth: [190,90,100,100],
              align: ['center','center','center','center'],
              data:array,
              header: ['<span style="font-size:14px;color:#000000">名称</span>', '<span style="font-size:14px;color:#000000">仓库</span>','<span style="font-size:14px;color:#000000">可用数量</span>',  '<span style="font-size:14px;color:#000000">安全库存</span>'],
            } ;
          }
        });
      },

      reloadQueryPurOrder(){
        var query = {dateType:'year'}
        if(this.where.dateEnum == '1') query.dateType ='day';
        if(this.where.dateEnum == '2') query.dateType ='month';
        if(this.where.dateEnum == '3') query.dateType ='year';

        QueryPurOrderStatisticsView(query).then((res)=>{
          this.drawstockChart(res);
        });
      },

      reloadQueryPurDeliveryRemind(){

        QueryPurDeliveryRemindStatisticsView().then((res)=>{
            if(res && res.length>0){
            let array = [];
            res.map((item)=>{
                let blist =[
                  `<span style="font-size:13px;color:#687284;cursor:pointer">${item.orderno}(${item.supplier})</span>`,
                  `<span style="font-size:13px;color:#687284;cursor:pointer">距离发货日期还剩</span><span style="font-size:13px;color:red;cursor:pointer">${item.d}</span><span style="font-size:13px;color:#687284">天</span>`
                ];
                array.push(blist);
            });
            this.configSaleAmount.data =[];
            this.configSaleAmount ={
              rowNum:8,
              headerBGC: 'transparent', // 表头背景色
              oddRowBGC: 'transparent', // 奇数行背景色
              evenRowBGC: 'transparent', // 偶数行背景色
              columnWidth: [240,150],
              align: ['center','center'],
              data:array
            } ;
          }
        });
      },

      initPurOrderTime(timeId, flag) {
        this.where.dateEnum = timeId;
        if (flag) {
          this.reloadQueryPurOrder();
        }
      },

      drawstockChart(items) {

        let datas = [
          { value: 40, name: '已过账', proportion: '94.41%' },
          { value: 24, name: '未过账', proportion: '66.9%' },
          { value: 32, name: '已过账未出库', proportion: '87.06%' },
        ];

        if(items){
          datas = [];
          items.map((item)=>{
            datas.push({value:item.val,name:item.name,proportion:item.proportion});
          })
        }

        let datap = [];
        let colorList = ['#3399ff', '#85c285', '#ffc266', '#ff8585', '#c299ff'];
        let color = colorList.splice(0, datas.length);
        for (let i = 0; i < datas.length; i++) {
          datap.push({
            value: datas[i].value,
            name: 'rosetemp' + i,
          });
          color.push('#FFFFFF');
        }
        datap = datas.concat(datap);
        // 绘制图表
        this.stockChartOption = {
          legend: {
            bottom: '5%',
            left: 'center',
            orient: 'vertical',
            data: datas,
            icon: 'circle',
            itemWith: 8,
            itemHeight: 8,
            itemGap: 10,
            // padding: [5, 10, 5, 0],
            formatter(name) {
              const item = datas.filter((item) => item.name === name)[0];
              return `{name|${name}}{value1|￥${item.value} }{name2|${item.proportion}%}`;
            },
            textStyle: {
              rich: {
                name: {
                  color: '#687284',
                  fontSize: 13,
                  width: 140,
                  // fontWeight:600
                },
                name2: {
                  color: '#687284',
                  fontSize: 13,
                  width: 200,
                  // fontWeight:600
                },
                value1: {
                  color: '#687284',
                  fontSize: 13,
                  width: 140,
                  // fontWeight:600
                },
              },
            },
          },
          title: {
          
            top: '10%',
            textAlign: 'center',
            left: '49.5%',
            textStyle: {
              color: '#262626',
              fontSize: 18,
              fontWeight: '600',
            },
          },
          color: color,
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [40, 170],
              center: ['50%', '58%'],
              roseType: 'radius',
              silent: true,
              startAngle: 180,
              legendHoverLink: false,
              itemStyle: {
                borderRadius: 0,
              },
              label: {
                show: false,
              },
              emphasis: {
                label: {
                  show: false,
                },
              },
              color: ['#f6f8fe', '#ffffff'],
              data: [
                { value: 10, name: 'r' },
                { value: 10, name: 'ro' },
              ],
            },
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [40, 170],
              center: ['50%', '58%'],
              roseType: 'radius',
              startAngle: 180,
              legendHoverLink: false,
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 1,
              },
              label: {
                show: true,
                position: 'inside',
                color: '#fff',
                formatter(params) {
                  return params.data.proportion;
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
              data: datap,
            },
          ],
        };
      },

      purOrderClick(row){
        removePageTab({ key: '/businesshandling/purordermanager' });
        this.$nextTick(() => {
          this.$router.push({path: '/businesshandling/purordermanager', query: { "orderNo":row.row[0].substr(58,11)} });
        });
      },
    }
  };
</script>

<style scoped>
  .analysis-chart-card-num {
    font-size: 16px;
    font-weight: bold;
  }

  .analysis-chart-card-content {
    height: 60px;
    box-sizing: border-box;
    margin-bottom: 2px;
    margin-top: 6px;
    /* border: 1px red solid; */
    
  }

  .analysis-chart-card-text {
    padding-top: 2px;
  }
</style>
